<!--
 * @Author: your name
 * @Date: 2020-04-18 19:13:53
 * @LastEditTime: 2020-04-19 12:44:28
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \cloudEdu\src\components\PageFooter.vue
 -->
<template>
  <div class="pageFooter flex-c">
    <div class="content flex-rb">
      <div class="flex-rs box">
        <img :src="defaultImg" class="logo" alt />
        <div class="contact">
          <p>
            <a href="http://xy.crfeb.cn/">关于我们</a>
          </p>
          <p>
            <a href="http://beian.miit.gov.cn/">陕ICP备 18019934号-2</a>
          </p>
          <p class="space"></p>
        </div>
      </div>
      <div class="flex-rs box">
        <div class="flex-rs">
          <div class="address">
            <p>
              <strong>地址</strong>: 陕西省咸阳市渭城区人民东路111号
            </p>
            <p>
              <strong>电话</strong>: 029-33777751
            </p>
            <p>
              <strong>邮编</strong>: 712000
            </p>
          </div>
        </div>
      </div>
      <div class="flex-rs box">
        <div class="flex-rs">
          <img :src="qrCodeImg1" class="qrImg" alt />
          <div class="attention">
            <p>关注我们</p>
            <p>安卓app下载</p>
          </div>
        </div>

        <div class="flex-rs">
          <img :src="qrCodeImg2" class="qrImg" alt />
          <div class="attention">
            <p>关注我们</p>
            <p>IOSapp下载</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "pageFooter",
  data() {
    return {
      defaultImg: require("@/assets/img/home/newLogo.jpg"),
      qrCodeImg1: require("@/assets/img/home/anzhuo.png"),
      qrCodeImg2: require("@/assets/img/home/IOS.png")
    };
  }
};
</script>

<style scoped>
.pageFooter {
  height: 245px;
  width: 100%;
  margin: 0 auto;
  background-color: #fff;
  border-top: 1px solid #ccc;
}
.pageFooter .content {
  min-width: 1350px;
}
.pageFooter .content p {
  font-size: 18px;
  color: #191a1d;
  letter-spacing: 0.07px;
}
.pageFooter .address p {
  font-size: 18px;
  color: #191a1d;
  letter-spacing: 0.07px;
}
.pageFooter .content a {
  font-size: 18px;
  color: #191a1d;
  letter-spacing: 0.07px;
}
.content .logo {
  width: 145px;
  height: 106px;
  object-fit: contain;
}
.content .box {
  width: 33%;
}
.content .qrImg {
  width: 100px;
  height: 100px;
  object-fit: contain;
}
.content .contact {
  margin-left: 50px;
}
.content .attention {
  margin: 0 20px;
}
.space {
  height: 23.33px;
}
.content .attention p:first-child {
  font-size: 18px;
  /* color: #676767; */
  letter-spacing: 0.07px;
}
.contact p {
  margin: 5px 0;
}
.address p {
  margin: 5px 0;
}
</style>
